<!--
 * @Author: C.
 * @Date: 2023-03-07 11:18:13
-->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
    title="明细申请"
    width="65%"
    :height="dynamicHeight"
  >
    <BasicTable @register="registerTable">
      <!-- <template #toolbar>
        <a-button type="primary" @click="handleEdit">{{ t('common.add') }}</a-button>
      </template> -->
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup name="TableModel">
  import { ref, computed } from 'vue';
  import { onBeforeRouteLeave } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useAppTable } from '/~/hooks/help/useAppTable';

  import { BasicTable } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { get_item_list } from '/@/api/work/purchase/requisition';
  import { getTableMaps, getFormMaps } from '/~/utils/help/createFields';
  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
  const emit = defineEmits(['success', 'register']);
  const Ids = ref<any[]>([]);
  // const router = useRouter();
  const { t } = useI18n();
  const dynamicHeight = ref<number>(700);
  const {} = useWindowSizeFn(
    () => {
      dynamicHeight.value = window.innerHeight * 0.65;
    },
    150,
    {
      immediate: true,
    },
  );
  const tableHeight = computed(() => {
    return dynamicHeight.value - 240;
  });
  const [registerTable, tableActions] = useAppTable({
    api: get_item_list,
    showTableSetting: true,
    rowKey: 'Id',
    showIndexColumn: false,
    pagination: {
      pageSize: 10,
    },
    maxHeight: tableHeight,
    formConfig: {
      schemas: getFormMaps(['BillId', 'Keyword']),
      submitOnChange: true,
      showActionButtonGroup: false,
    },
    useSearchForm: true,
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps: (record) => {
        return {
          disabled: Ids.value.includes(record.Id), // Column configuration not to be checked
        };
      },
    },
    columns: getTableMaps([
      {
        dataIndex: 'BillId',
        title: t('commonField.BillId'),
        fixed: 'left',
      },
      'ItemId',
      'ItemName',
      'DeliveryDate',
      'Description',
      'Unit',
      'Quantity',
      'Remarks',
    ]),
  });
  onBeforeRouteLeave(() => {
    modelActions.closeModal();
  });
  const [registerModal, modelActions] = useModalInner((data) => {
    const { details = [] } = data;

    details && (Ids.value = details.map((item) => item.Id));
    modelActions.setModalProps({ confirmLoading: false });
  });
  async function handleSubmit() {
    try {
      modelActions.setModalProps({ confirmLoading: true });
      const selects = tableActions.getSelectRows();
      emit(
        'success',
        selects.map((item) => {
          return {
            ...item,
            Quantity: 1,
          };
        }),
      );
      tableActions.clearSelectedRowKeys();
      modelActions.closeModal();
    } finally {
      modelActions.setModalProps({ confirmLoading: false });
    }
  }
  // function handleEdit() {
  //   router.push({
  //     name: 'Ba_Item_Edit',
  //     query: {},
  //   });
  // }
</script>
